<template>
  <div class="login-container">
    <div class="pic"></div>
    <div class="text">
      <h2>后台管理系统</h2>
      <h3>author@adnaan</h3>
    </div>
    <div class="login-form">
      <h1 class="login-title">后台管理-登录</h1>
      <el-input size="large" class="form-input" v-model="data.loginData.username" placeholder="请输入用户名"></el-input>
      <el-input
        size="large"
        class="form-input"
        type="password"
        v-model="data.loginData.password"
        placeholder="请输入密码"
      ></el-input>
      <el-button size="large" type="primary" style="width: 100%; text-align: center" @click="handleLogin">
        登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
  import { reactive } from 'vue'
  import { useRouter } from 'vue-router'
  import { SysLoginApi } from '@/api/system/sys_user'
  import { useUserStore } from '@/stores/user'
  import { ElMessage } from 'element-plus'

  const store = useUserStore()
  const router = useRouter()
  const data = reactive({
    loginData: {
      username: '',
      password: ''
    }
  })
  const loginRules = {
    username: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 3 到 5 个字符', trigger: 'blur' }
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
    ]
  }
  const handleLogin = () => {
    SysLoginApi(data.loginData).then(res => {
      //自定义表单验证规则
      if(data.loginData.username === '' || data.loginData.password === ''){
        ElMessage({
          message: '请输入用户名或密码',
          type: 'error'
        })
        return
      }
      if (res.code === 200) {
        store.login(res.data)
        router.push('/')
      } else {
        ElMessage({
          message: res.msg,
          type: 'error'
        })
      }
    })
  }
</script>

<style>
  .login-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #216cf2;
    background-image: url('../assets/img/icon-bg-grid.png');
    background-repeat: repeat;
    position: relative;
  }
  .pic {
    height: 100%;
    background: url('../assets/svg/login-bg.svg') calc(50% - 200px) center / 520px 537px no-repeat;
  }

  .text {
    width: 400px;
    height: 100%;
    color: #fff;
    position: absolute;
    top: 10%;
    left: 25%;
  }

  .text h2 {
    font-size: 45px;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .text h3 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  }

  .login-form {
    width: 300px;
    height: 400px;
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translate(-20%, -50%);
    background-color: #fff;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .form-input {
    width: 100%;
    margin-bottom: 20px;
  }

  .login-title {
    text-align: center;
    margin-bottom: 50px;
    color: #333;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  .el-form-item {
    width: 100%;
    margin-bottom: 20px;
    transition: all 0.3s ease;
  }
</style>
